<template>
    <div class="wrapper" style="height: 100vh;overflow-x: hidden;">
        <!-- 回到顶部 -->
        <el-backtop target=".wrapper">
            <i class="el-icon-caret-top"></i>
        </el-backtop>

        <Head></Head>
        <div v-model="blogData" class="grid-content content bg-purple blog_bg ">

            <div style="padding: 1%;">
                <!--<el-avatar style="vertical-align:middle" :src="blogData.tuser.avatar"></el-avatar>-->
                <i style="margin-left: 20px;" class="el-icon-date"><span style="font-size: 18px;"> {{blogData.addtime}}</span></i>
                <i style="margin-left: 20px;" class="el-icon-chat-line-square"><span style="font-size: 18px;"> {{blogData.commentCount}}</span></i>
                <el-button size="mini" style="float: right;margin: 1%;">
                    <router-link to="/news">返回 <i class="el-icon-d-arrow-right"></i></router-link>
                </el-button>

            </div>
            <div style="background-color: #DCDFE6;height: 1px;margin: 5px 0;">
                <h4 style="margin-left: 70px;margin-top: 12px">{{blogData.newsTitle}}</h4>
                <p><span style="margin-left: 100px;font-size: 12px">编辑人: {{blogData.newsEditer}}</span>
                    <span style="margin-left: 100px;font-size: 12px">审核人: {{blogData.audit}}</span>
                    <span style="margin-left: 100px;font-size: 12px">来源: {{blogData.resource}}</span>
                </p>
            </div>
            <div class="markdown-body" v-html="blogData.newsContent" style="padding: 40px;margin-top: 30px"></div>
        </div>
        <!-- 页脚 -->
        <Foot></Foot>
    </div>
</template>

<script>
    import Head from '../../views/component/Head'
    import Foot from '../../views/component/Foot'
    import Comment from '../../views/component/Comment'
    import 'github-markdown-css/github-markdown.css'
    import {getByNewsId} from "../../api/blog/news";
    export default {
        name: 'Blog',
        components:{ Head,Foot,Comment },
        data () {
            return {
                blogData:'', //博客数据
            }
        },
        props:['id'], //接收路由传过来的id
        mounted() {
            this.initBlog()
        },
        methods:{
            initBlog(){
                const _this = this
                getByNewsId(this.id).then(resp=>{
                    console.log(resp.data.news)
                    _this.blogData = resp.data.news
                    var MardownIt = require("markdown-it")
                    var md = new MardownIt()
                    var result = md.render(resp.data.news.content)
                    _this.blogData.content = result
                    console.log(_this.blogData)
                })
            }
        }
    }
</script>

<style scoped>
    .blog_bg{
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        width: 60%;
        margin-top: 5% !important;
        margin-bottom: 5% !important;
        margin: auto;
        min-height: 500px;
    }
</style>
